<template>
    <div class="imageClassify">
        <div class="contentBill" :style="contentStyle">
            <!-- <bl-drag :id="bgDragId" @on-dragmove="dragMove" @on-dragover="dragOver"> -->
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <div class="left">
                            <div
                                class="upload_image"
                                v-loading="loading"
                                element-loading-text="拼命加载中"
                            >
                                <el-image :src="imageUrl"></el-image>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <div class="right">
                            <!-- <div class="title">
                                <h2>识别结果</h2>
                            </div>-->
                            <div class="reco_result">
                                <div class="item_title">
                                    <h2>非表格数据</h2>
                                </div>
                                <div class="list">
                                    <li class="list_row" v-for="item in listData" :key="item.id">
                                        <div class="list_column" v-for="it in item.value" :key="it">
                                            <span>{{ it }}</span>
                                        </div>
                                    </li>
                                </div>
                                <div class="table">
                                    <div class="item_title">
                                        <h2>表格数据</h2>
                                    </div>
                                    <div class="table_data">
                                        <table width="100%" align="center">
                                            <tr v-for="item in tableData" :key="item.id">
                                                <td
                                                    v-for="it in item.value"
                                                    :key="it"
                                                    :width="Math.round(100 / item.value.length) + '%'"
                                                    :colspan="Math.floor(columns / item.value.length)"
                                                    style="vertical-align:middle"
                                                >{{it}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!-- </bl-drag> -->
        </div>
    </div>
</template>

<script>
import bus from "@/assets/js/bus";
import busType from "@/assets/js/busType";
// import labelTool from "@components/common/labelTool";
// import imageAnnotate from "@components/common/imageAnnotate";
import BlDrag from "@components/common/bl-drag.vue";

export default {
    props: {},
    data() {
        return {
            bgDragId: "",
            imageUrl: "",
            listData: [],
            tableData: [],
            loading: true,
            columns: 0
        };
    },
    watch: {
        tableData: function() {
            // let _this = this;
            // this.$nextTick(() => {
            //     _this.resetTableRowHeight();
            // });
        }
    },
    computed: {
        contentStyle() {
            return {
                "max-height":
                    document.documentElement.clientHeight - 180 + "px",
                // overflow: "scroll"
                "overflow-y": "auto",
                "overflow-x": "hidden"
            };
        }
    },
    components: {
        BlDrag
        // labelTool,
        // imageAnnotate
    },

    mounted() {
        // this.setLoading();
    },
    methods: {
        loadRecoResult(resId) {
            console.log("加载识别结果......");
            if (resId === 0) {
                return;
            }
            let url = this.$api.GET_RECO_RESULT_URL.replace("{resId}", resId);
            this.$request
                .get(url, {})
                .then(res => {
                    if (res.hasOwnProperty("data")) {
                        this.imageUrl = res.data.imageUrl;
                        this.listData = res.data.text;
                        this.tableData = res.data.table;
                        this.setLoading();
                        this.calcTableColumns(this.tableData);
                    }
                })
                .catch(err => {
                    console.error(err);
                });
        },
        setLoading() {
            var newImg = new Image();
            console.log("imgUrl", this.imageUrl);
            newImg.src = this.imageUrl;
            newImg.onerror = () => {
                console.log("图片加载失败.....");
                this.loading = true;
            };
            newImg.onload = () => {
                // 图片加载成功后
                this.loading = false;
            };
        },
        calcTableColumns(tableData) {
            let columns = 0;
            tableData.forEach(rowData => {
                columns = Math.max(columns, rowData.value.length);
            });
            this.columns = columns;
            console.log("columns", this.columns);
        }
    }
};
</script>

<style lang="stylus">
.contentBill {
    width: 100%;

    .left {
        .upload_image {
            min-height: 700px;
            border: solid gray 1px;
        }
    }

    .right {
        .title {
            text-align: center;
            margin: 5px 0;
        }

        .reco_result {
            border: solid gray 1px;
            margin: auto 10px;
            padding: 20px 0;
            height: auto;

            li {
                list-style: none;
            }

            .list {
                display: inline;

                .list_column {
                    display: inline-block;
                    padding: 2px;
                    border: solid #61a48b 1px;
                    margin: 5px 10px;
                }
            }

            .item_title {
                color: black;
                margin: 10px 7px;
            }

            .table {
                width: 100%;

                .table_data {
                    margin: auto 7px;
                }

                table, td {
                    border: 1px #61a48b solid;
                    border-collapse: collapse;
                    line-height: 20px;
                    text-overflow: ellipsis;
                    white-space: wrap;
                    overflow: hidden;

                    tr, td {
                        height: 30px;
                    }
                }
            }
        }
    }
}
</style>
